// React.memo - props的比较机制
import { memo, useState, useMemo } from 'react'

const SonMeno = memo(function Son({count}) {
  console.log('子组件渲染了');
  return <div>this is son， {count}</div>
})

function App() {
  const [count, setCount] = useState(0)
  // const [list, setList] = useState([1, 2, 3])
  const list = useMemo(() => [1, 2, 3], [])
  return (
    <div className="app">
      <button onClick={() => setCount(count + 1)}>+{count}</button>
      {/* <button onClick={() => setList([...list, 4])}>+追加数据</button> */}
      <SonMeno count={list} />
    </div>
  )
}

export default App